<template>
    <el-form :inline="true" :model="formdata" class="demo-form-inline">
        <el-form-item label="编号" prop="id">
            <el-input v-model="formdata.id" placeholder="请输入编号" />
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="formdata.name" placeholder="请输入名称" clearable />
        </el-form-item>
        <el-form-item label="批量">
            <el-input v-model="formdata.ids" placeholder="请输入多个编号" clearable />
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <!--列表展示-->
    <el-table :data="tableData" style="width: 100%">
        <el-table-column fixed prop="id" label="编号" width="70" />
        <el-table-column fixed prop="name" label="名称" width="120" />
        <el-table-column prop="img" label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img.split(',')[0]" width="50" height="50">
            </template>
        </el-table-column>
        <el-table-column prop="price" label="价格" width="120" />
        <el-table-column prop="seq" label="排序" width="120" />
        <!-- <el-table-column prop="brief" label="商品介绍" width="120" /> -->
        <el-table-column fixed="right" label="操作" width="150">
            <template #default="scope">
                <el-button type="danger" size="small" @click="offlineClick(scope.row)">下线</el-button>
                <el-button type="warning" size="small" @click="handleClick(scope.row)">修改</el-button>
            </template>
        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
        @current-change="currentChange" />
</template>
<script setup>
import { onMounted, reactive, ref } from 'vue';
import { select , delpacth } from '@/api/productApi'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
const router=useRouter()
const pageData = reactive({
    total: 0,  //总条数
    pageSize: 3, //每页显示数量
    pageNum: 1  //第几页
})
const formdata = reactive({
    id: '',
    name: '',
    ids: []
})

const tableData = ref([])

// function currentChange(num) { 
//      console.log(num);
//     pageData.pageNum = num
//     callPorductApi()
// }

onMounted(() => {
    callPorductApi()
})

const callPorductApi = () => {
    let id = formdata.id === "" ? undefined : formdata.id
    let name= formdata.name=== ""? undefined :formdata.name
    let ids = formdata.ids[0] === 0 ? undefined : formdata.ids
    select({id:id,name:name,ids:ids}).then(res => {
        console.log(res);
        tableData.value = res.data.data
        
    })
}

const onSubmit = () => { 
    callPorductApi()
}


const handleClick = (row) => {
    console.log('click')
    router.push({ name: 'product-edit', query: {id: row.id} })
}
const offlineClick = (row) => {
    ElMessageBox.confirm(
        '确认对-'+ row.name+" 禁售吗？",
        '警告信息',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            delpacth({id:row.id}).then(res => { 
                 ElMessage({
                    type: 'success',
                     message: '禁售成功'
                 })
                callPorductApi()
            })
           
        })
}
</script>
<style scoped>
.demo-form-inline {
    margin-top: 10px;
    margin-bottom: 5px;
    padding-left: 10px;
}
</style>